<template>
	<view>
		<!-- <view class="progress-box" v-for="(item,index) in list">
			<uv-line-progress class="item-box" height="10" v-if="item.show" :percentage="item.percentage"
				activeColor="#007aff"></uv-line-progress>
		</view>
		<view class="downlaod-box">
			<view class="download-item-box" v-for="item in downloadInfo">
				<view class="item-box image-index">
					<uv-text :text="`图片 ${item.index+1}`" :lineHeight="20" size="10" color="#00aaff"
						align="center"></uv-text>
				</view>
				<view class="item-box">
					<uv-text v-if="item.percentage==100" prefixIcon="checkmark-circle-fill"
						:iconStyle="{color:'#00ff00'}" text="下载完成" :lineHeight="20" size="10" color="#999999"></uv-text>
					<uv-text v-else prefixIcon="download" :iconStyle="{color:'#00ff00'}" text="正在下载..." :lineHeight="20"
						size="10" color="#999999"></uv-text>
				</view>
				<view class="item-box ">
					<uv-text v-if="item.percentage==100" text="保存图片成功" :lineHeight="20" size="10"
						color="#999999"></uv-text>
					<uv-line-progress v-else :percentage="item.percentage" :showText="false" />
				</view>
			</view>
		</view> -->
		<!-- <view class="actions-box">
			<uv-button type="primary" text="开始下载" @click="download"></uv-button>
		</view>
		<video :src="video.url" :header="header" :autoplay="true" mediatype="video" :custom-cache="false"
			:poster="video.cover"></video> -->
		<!-- <uv-image :src="image.url"></uv-image> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				downloadInfo: [{
					index: 0,
					percentage: 0
				}],
				video: {
					url: "",
					cover: ""
				},
				image: {
					url: ""
				},
				header: {
					"Content-Type":"video/mp4"
				}

			};
		},
		methods: {
			//"http://192.168.1.10:8081/api/download/video?url="+
			download() {
				uni.downloadFile({
					url: this.video.url,
					header:{
						"Content-Type":"video/mp4"
					},
					success: (res) => {
						console.log('下载成功',res);
						uni.saveVideoToPhotosAlbum({
							filePath:res.tempFilePath,
							success: (result) => {
								console.log(result,"保存成功")
							}
						})
					}
				})
			}
			// onStart() {
			// 	for (let i = 0; i < 5; i++) {
			// 		for (let percentage = 0; percentage <= 100; percentage++) {
			// 			setTimeout(() => {
			// 				this.startDownload(i, percentage)
			// 			}, 1000)
			// 		}
			// 	}
			// },
			// startDownload(index, percentage) {
			// 	if (this.downloadInfo.findIndex(item => item.index === index) != -1) {
			// 		this.downloadInfo[index].percentage = percentage
			// 	} else {
			// 		this.downloadInfo.push({
			// 			index,
			// 			percentage
			// 		})
			// 	}

			// },
		}
	}
</script>

<style lang="scss" scoped>
	.downlaod-box {
		.download-item-box {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: start;
			margin: 5px 10px;

			.item-box {
				margin: 0 10px;
				width: 90px;
				line-height: 20px;
			}

			.image-index {
				width: 50px;
				border: 1px solid #00aaff;
				border-radius: 5px;
			}
		}
	}

	.actions-box {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}
</style>